<template>
    <div>
        <qt-form
            :buttons="buttons"
            :formTemplate="formTemplate"
            :formValue="formValue"
            :formRules="formRules"
            @change="changeHandler"
        ></qt-form>
    </div>
</template>

<script>
import config from './config';

export default {
    name: `${config.model}Editor`,

    data() {
        return {
            buttons: [
                {
                    size: 'mini',
                    name: '保存',
                    prefixIcon: 'el-icon-check',
                    visible: true,
                    disabled: false,
                    callback: () => {
                        this.submitForm();
                    }
                },
                {
                    size: 'mini',
                    name: '新增',
                    prefixIcon: 'el-icon-plus'
                },
                {
                    size: 'mini',
                    name: '编辑',
                    prefixIcon: 'el-icon-edit'
                },
                {
                    size: 'mini',
                    name: '重置',
                    prefixIcon: '',
                    callback: () => {
                        this.resetForm();
                    }
                }
            ],
            formTemplate: [
                {
                    type: 'input',
                    labelName: '区域名称',
                    fildeName: 'areaName',
                    ruleName: 'areaName',
                    required: true,
                    clearable: true,
                    disabled: false,
                    placeholder: '请输入'
                },
                {
                    type: 'number',
                    labelName: '数字测试',
                    fildeName: 'totleNumber',
                    ruleName: 'totleNumber',
                    required: true,
                    disabled: false,
                    placeholder: ''
                },
                {
                    type: 'select',
                    labelName: '区域值',
                    fildeName: 'singleValue',
                    ruleName: 'singleValue',
                    keyName: 'area',
                    required: true,
                    multiple: false,
                    clearable: true,
                    disabled: false,
                    placeholder: '请选择'
                },
                {
                    type: 'multipleSelect',
                    labelName: '多选测试',
                    fildeName: 'multipValue',
                    ruleName: 'multipValue',
                    keyName: 'area2',
                    required: true,
                    multiple: true,
                    clearable: true,
                    disabled: false,
                    placeholder: '请选择'
                },
                {
                    type: 'date',
                    labelName: '日期测试',
                    fildeName: 'dateValue',
                    ruleName: 'dateValue',
                    required: true,
                    clearable: true,
                    disabled: false,
                    readonly: false,
                    isShowOptions: false,
                    defaultValue: new Date('2020-02-15'),
                    placeholder: '请选择日期'
                },
                {
                    type: 'daterange',
                    labelName: '截止日期测试',
                    fildeName: 'daterangeValue',
                    ruleName: 'daterangeValue',
                    required: true,
                    clearable: true,
                    disabled: false,
                    readonly: false,
                    isShowOptions: false,
                    defaultValue: ['2020-02-15', '2020-02-16'],
                    startPlaceholder: '请选择开始日期',
                    endPlaceholder: '请选择结束日期'
                },
                {
                    type: 'textarea',
                    labelName: '文本域测试',
                    fildeName: 'remark',
                    ruleName: 'remark',
                    required: true,
                    clearable: true,
                    disabled: false,
                    placeholder: '请输入'
                }
            ],
            formValue: {
                areaName: '123',
                totleNumber: '',
                singleValue: '', // ['shanghai', 'beijing'],
                multipValue: ['shanxi', 'xizang'],
                dateValue: '',
                daterangeValue: [],
                remark: ''
            },
            formRules: {
                areaName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                totleNumber: [{ required: true, message: '请输入总数', trigger: 'blur' }],
                singleValue: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
                multipValue: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
                dateValue: [{ required: true, message: '请选择时间', trigger: 'change' }],
                daterangeValue: [{ required: true, message: '请选择时间', trigger: 'change' }],
                remark: [{ required: true, message: '请输入描述', trigger: 'blur' }]
            }
        };
    },

    computed: {
        id() {
            return this.$options.id;
        }
    },

    created() {
        this.setTab();
    },

    activated() {
        this.setTab();
    },

    methods: {
        setTab() {
            this.$mytab.set(this.$route.name + this.$route.path, {
                name: config.model + this.id,
                path: this.$route.fullPath,
                compName: this.$options.name
            });
        },

        changeHandler(value, fildeName) {
            this.formValue[fildeName] = value;
        }
    }
};
</script>